<template>

  <div>
    <el-scrollbar style="margin: 0 20px">
      <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item,index) in getMatchedList()" :key="index"
                            :to="FILE_LIST_PATH+'?path='+item.path">
          <span class="breadcrumb-content-item">{{ item.name }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-scrollbar>


    <el-scrollbar style="height: calc(100dvh - 30px)">

      <div class="data-empty" v-if="!sysFileList || sysFileList.length < 1">
        <img style="width: 200px; height: 140px" src="@/assets/icons/empty.svg" alt=""/>
        <div>文件夹为空</div>
      </div>

      <el-table v-else :data="sysFileList" style="width: 100%">
        <el-table-column label="名称" align="center" prop="fileName" :sortable="true">
          <template #default="scope">
            <div
                :id="'fileName'+scope.$index"
                style="user-select: none"
                @dblclick="handleDoubleClick(scope.row)"
                class="click-hover"
            >
              {{scope.row.fileName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" prop="fileType" :sortable="true">
          <template #default="scope">
            <div
                style="user-select: none"
                @dblclick="handleDoubleClick(scope.row)"
                class="click-hover"
            > {{dictMap.get(scope.row.fileType).name}}
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="address" label="预览" align="center" @click="handlePreview">
          <template #default="scope">
            <div
                :id="'fileType'+scope.$index"
                style="user-select: none"
                @dblclick="handleDownloadDialogVisible(scope.row)"
            >


              <!--            -webkit-touch-callout: none; ios长按图片会展示图片信息，这个可以禁用，安卓端不确定是否有效-->
              <el-image
                  ref="imageRef"
                  :hide-on-click-modal="true"
                  :preview-teleported="true"
                  show-progress
                  style="width: 50px; height: 50px;  -webkit-touch-callout: none;"
                  :src="getFileUrl(scope.row)"
              />

            </div>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog
          class="dialog"
          v-model="downloadDialogVisible"
          width="50%"
          :show-close="false"
      >
        <template #header></template>
        <ul class="list">
          <li class="item" @click="handlePreviewFile" v-if="dictMap.get(currentDownloadFile.fileType)?.canPreview">
            <span class="text">预览文件</span>
            <span class="icon"><img :src="previewIcon" alt=""></span>
          </li>
          <li class="item" @click="downloadFile(currentDownloadFile,0);downloadDialogVisible=false">
            <span class="text">{{currentDownloadFile.fileType===3?'下载原视频':"下载文件"  }}</span>
            <span class="icon"><img :src="downloadVideoIcon" alt=""></span>
          </li>
          <li v-if="currentDownloadFile.fileType===3" class="item" @click="downloadFile(currentDownloadFile,1);downloadDialogVisible=false">
            <span class="text">下载处理后视频</span>
            <span class="icon"><img :src="downloadVideoIcon" alt=""></span>
          </li>
        </ul>
      </el-dialog>
    </el-scrollbar>

    <upload-file id="upload-file" v-if="route.query.path" :path="route.query.path"
                 :fetchSysFileList="fetchSysFileList"/>

    <operate-tour v-if="sysFileList && sysFileList.length>0"/>
    <preview-file v-if="showPreview" :dialog-visible="showPreview" :sys-file="currentDownloadFile" @closeDialog="showPreview=false"/>

  </div>
</template>
<script setup>


import {onMounted, ref} from 'vue'
import {getSysFileList} from '@/api/sysFileInfo/sysFileInfo'
import {useRoute, useRouter} from 'vue-router'
import {ArrowRight} from "@element-plus/icons-vue"
import UploadFile from "@/views/file/component/UploadFile.vue";

import previewIcon from '@/assets/icons/preview.svg'
import videoIcon from '@/assets/icons/video.svg'
import dirIcon from '@/assets/icons/dir.svg'
import otherFileIcon from '@/assets/icons/file.svg'
import mlFileIcon from '@/assets/icons/ml.svg'
import excelIcon from '@/assets/icons/excel.svg'
import wordIcon from '@/assets/icons/word.svg'
import textIcon from '@/assets/icons/text.svg'
import pdfIcon from '@/assets/icons/pdf.svg'
import javaIcon from '@/assets/icons/java.svg'
import cssIcon from '@/assets/icons/css.svg'
import jsIcon from '@/assets/icons/js.svg'
import jsonIcon from '@/assets/icons/json.svg'
import vueIcon from '@/assets/icons/vue.svg'
import downloadVideoIcon from '@/assets/icons/download_video.svg'
import ymlIcon from '@/assets/icons/yml.svg'
import propertiesIcon from '@/assets/icons/properties.svg'
import {FILE_LIST_PATH} from "@/const/RouterPathConst"
import OperateTour from "@/views/file/component/OperateTour.vue";
import PreviewFile from "@/views/file/component/PreviewFile.vue";

const imageRef = ref()
const dictMap = new Map()
dictMap.set(1, {name: '目录', canDownload: false, canPreview: false, icon: dirIcon})
dictMap.set(2, {name: '图片', canDownload: true, canPreview: true})
dictMap.set(3, {name: '视频', canDownload: true, canPreview: true, icon: videoIcon})
dictMap.set(4, {name: '其他文件', canDownload: true, canPreview: true, icon: otherFileIcon})
dictMap.set(5, {name: 'xml', canDownload: true, canPreview: true, icon: mlFileIcon})
dictMap.set(6, {name: 'html', canDownload: true, canPreview: true, icon: mlFileIcon})
dictMap.set(7, {name: 'word', canDownload: true, canPreview: true, icon: wordIcon})
dictMap.set(8, {name: 'excel', canDownload: true, canPreview: true, icon: excelIcon})
dictMap.set(9, {name: '文本文件', canDownload: true, canPreview: true, icon: textIcon})
dictMap.set(10, {name: 'pdf', canDownload: true, canPreview: true, icon: pdfIcon})
dictMap.set(11, {name: 'java', canDownload: true, canPreview: true, icon: javaIcon})
dictMap.set(12, {name: 'js', canDownload: true, canPreview: true, icon: jsIcon})
dictMap.set(13, {name: 'css', canDownload: true, canPreview: true, icon: cssIcon})
dictMap.set(14, {name: 'json', canDownload: true, canPreview: true, icon: jsonIcon})
dictMap.set(15, {name: 'vue', canDownload: true, canPreview: true, icon: vueIcon})
dictMap.set(16, {name: 'properties', canDownload: true, canPreview: true, icon: propertiesIcon})
dictMap.set(17, {name: 'yml', canDownload: true, canPreview: true, icon: ymlIcon})

const route = useRoute()
const router = useRouter()
const showPreview=ref(false)
const sysFileList = ref([])
onMounted(async () => {
  let path = route.query.path
  fetchSysFileList(path);
})


const getMatchedList = () => {
  let path = route.query.path
  let result = [{name: "此电脑", path: ""}];
  if (!path) {
    return result;
  }
  const pathParts = path.split("\\").filter(pathPart => pathPart);


  // 遍历分割后的路径，生成包含 `name` 和 `path` 的对象
  let currentPath = '';
  pathParts.forEach(part => {
    currentPath = currentPath ? currentPath + '\\' + part : part + '\\';
    result.push({
      name: part,
      path: currentPath
    });
  });
  return result;
}
const fetchSysFileList = (path) => {
  return getSysFileList(path).then((resp) => {
    if (resp.code === '200') {
      sysFileList.value = resp.data
    }
  })
}
const getFileUrl = (sysFile) => {
  let fileType = sysFile.fileType;
  let fileConfig = dictMap.get(fileType);

  if (fileConfig.icon) {
    return fileConfig.icon
  }
  return `${import.meta.env.VITE_APP_BASE_API}/file/download?path=${encodeURIComponent(sysFile.path)}`
}

const handlePreviewFile=()=>{
  downloadDialogVisible.value=false;
  showPreview.value=true

}
const handleDoubleClick = (sysFile) => {
  let fileType = sysFile.fileType

  if (fileType === 1) {
    router.push(`${FILE_LIST_PATH}?path=${sysFile.path}`)
  }
}
const downloadDialogVisible = ref(false);
const currentDownloadFile = ref();
// 长按开始
const handleDownloadDialogVisible = (sysFile) => {
  if(sysFile.fileType===1){
    handleDoubleClick(sysFile)
    return;
  }

  currentDownloadFile.value = sysFile;

  downloadDialogVisible.value = true;


}

const downloadFile = (sysFile, handleFlag) => {
  let flagParam = handleFlag ? "&handleFlag=" + handleFlag : "";
  let encodePath = encodeURIComponent(sysFile.path);
  window.open(`${import.meta.env.VITE_APP_BASE_API}/file/download?path=${encodePath}${flagParam}`)
}


const handlePreview = (sysFile) => {
}


</script>

<style scoped>
.breadcrumb {
  height: 30px;
  display: flex;
  align-items: center;
}

.breadcrumb .breadcrumb-content-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 30px;
  display: block;
}

.data-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.data-empty div {
  margin-top: 10px;
  color: #bdbdbd;
}


.item {
  display: flex;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #e0e0e0; /* 底部边框线，营造分隔效果 */

}

.list .item:last-child {
  border-bottom: none;
}

.text {
  flex: 1;
  margin-left: 10px; /* 文字与图标间的间距 */
  font-size: 16px; /* 文字大小，可按需调整 */
  color: #333; /* 文字颜色，可按需调整 */
}

.icon img {
  width: 24px; /* 图标宽度，可按需调整 */
  height: 24px; /* 图标高度，可按需调整 */
}

/* 可选：鼠标悬停效果 */
.list .item:hover {
  background-color: #e0e0e0; /* 悬停时背景色变深 */
}

:deep .dialog {
  padding: 0;
  border-radius: 6px;
  overflow: hidden; /* 这会让子项的圆角也生效 */
}

:deep(.el-dialog__header) {
  padding-bottom: 0;
}
.click-hover:hover{
  color: #5f9eff;
}
</style>
